<template>
  <div class="subscribePerformance">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">订台业绩</x-header>
    <div class="topHolder"></div>
    <group class="limit">
      <cell title="剩余赠送额度：" :inline-desc="'每' + interval + '额度'" ><span :class="[{red:remainLimit < 100}]" v-text="'¥ ' + formatCurrency(remainLimit)"></span></cell>
    </group>
    <group-title style="margin-top: 0.2rem;">（正常额度：<span v-text="'¥ ' + formatCurrency(normalLimit)"></span>元+临时额度：<span v-text="'¥ ' + formatCurrency(temporaryLimit)"></span>元）</group-title>
    <card class="gridDisplay">
      <div class="card-padding" slot="content">
        <div class="filterArea" ref="filterArea">
          <div class="filterItem"><x-button @click.native="showUsersByDepart = true" type="default" v-html="$refs.usersByDepart&&$refs.usersByDepart.getNameValues().replace(/ /g,' / ')+'<i class=\'iconfont icon-xiangxia2\'></i>'" :show-loading="loadingStatus" :disabled="loadingStatus" class="inlineBtn popPickerBtn"></x-button></div>
          <div class="filterItem"><x-button @click.native="showTimeStatus = true" type="default" v-html="$refs.timeStatus&&$refs.timeStatus.getNameValues()+'<i class=\'iconfont icon-xiangxia2\'></i>'" :show-loading="loadingStatus" :disabled="loadingStatus" class="inlineBtn popPickerBtn"></x-button></div>
        </div>
        <popup-picker @on-change="refreshPage()" :show.sync="showUsersByDepart" :show-cell="false" :data="usersByDepart" :columns="2" v-model="choosenDepartAndUser" ref="usersByDepart" class="btn_popup-picker"></popup-picker>
        <popup-picker @on-change="refreshPage()" :show.sync="showTimeStatus" :show-cell="false" :data="timeStatus" :columns="1" v-model="choosenTimeStatus" ref="timeStatus" class="btn_popup-picker"></popup-picker>
        <h2 class="title">
          <span v-text="performanceInfo.successSubscribe">0</span> 单<br/>
          <small>成功预订台总数</small>
        </h2>
        <grid :cols="2" style="text-align: center;">
          <grid-item label="订台总数">
            <span class="data"><span v-text="performanceInfo.totalSubscribe">0</span>单</span>
          </grid-item>
          <grid-item label="环比（对比昨日）">
            <span class="data"><span v-text="formatCurrency(performanceInfo.relativeRatio*100)">0</span>%</span>
          </grid-item>
          <grid-item label="取消台数">
            <span class="data"><span v-text="performanceInfo.cancelSubscribe">0</span>单</span>
          </grid-item>
          <grid-item label="订台一次以上熟客数">
            <span class="data"><span v-text="performanceInfo.morethan1Visitor">0</span>单</span>
          </grid-item>
          <grid-item label="新客数">
            <span class="data"><span v-text="performanceInfo.newVisitor">0</span>单</span>
          </grid-item>
          <grid-item label="熟客占比">
            <span class="data"><span v-text="formatCurrency(performanceInfo.frequentVisitor*100)">0</span>%</span>
          </grid-item>
        </grid>
      </div>
    </card>
    <group title="业绩列表：">
      <x-table :cell-bordered="false">
        <thead>
        <tr style="background-color: #F7F7F7">
          <th width="20%">订位人</th>
          <th width="22%">订台数量</th>
          <th width="29%">赠送金额</th>
          <th width="29%">消费金额</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in performanceInfo.detail" :key="index">
          <td v-text="item.subscriber"></td>
          <td v-text="item.subscribeNum"></td>
          <td v-text="'¥ ' + formatCurrency(item.presentTotal) + '元'"></td>
          <td v-text="'¥ ' + formatCurrency(item.consumption) + '元'"></td>
        </tr>
        <tr v-if="JSON.stringify(performanceInfo) != '{}' && performanceInfo.detail.length <= 0">
          <td colspan="4">
            <div class="listNoItem">暂无业绩明细</div>
          </td>
        </tr>
        </tbody>
      </x-table>
    </group>
    <br/>
    <br/>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Box, Card, PopupPicker, Grid, GridItem, GroupTitle, XTable, numberComma } from 'vux'
  import {getUsersByDepart,getSubscribePerformance,getPersonalLimit} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'subscribePerformance',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        remainLimit:0,
        normalLimit:0,
        temporaryLimit:0,
        interval:'周',
        showUsersByDepart: false,
        choosenDepartAndUser:['allDepart','allPerson'],
        showTimeStatus: false,
        timeStatus:[
          {name: '所有时段',value: 'all'},
          {name: '十点前',value: '0'},
          {name: '十点后',value: '1'}
        ],
        choosenTimeStatus:['all'],
        performanceInfo:{}
      }
    },
    components:{
      Group,
      Cell,
      XButton,
      Box,
      Card,
      PopupPicker,
      Grid,
      GridItem,
      GroupTitle,
      XTable
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthorityPerformance
      },
      usersByDepart:{
        get(){
          return this.$store.getters.getUsersByDepart_performance
        },
        set(value){
          this.$store.commit('updateUsersByDepart_performance', value)
        }
      }
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      refreshPage(){
        this.loadingStatus = true
        let reqParams = {
          choosenTimeStatus:this.choosenTimeStatus,
          choosenDepartAndUser: this.choosenDepartAndUser
        }
        getSubscribePerformance(reqParams).then((res)=>{
          if(res.status == 'success'){
            this.performanceInfo = res.data
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getSubscribePerformance error info:', res.msg)
          }
          this.loadingStatus = false
        }).catch((err)=>{console.log('getSubscribePerformance catch info:',err)})
      }
    },
    mounted(){
      return new Promise((resolve,reject)=>{
        if(this.usersByDepart.length <= 0)
          getUsersByDepart(this.authority).then((res)=>{
            if(res.status == 'success'){
              this.usersByDepart = res.data
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getUsersByDepart error info:', res.msg)
            }
            resolve()
          }).catch((err)=>{console.log('getUsersByDepart catch info:',err)})
        else resolve()
      }).then(()=>{
        switch (this.authority) {
          case 'self':
            this.choosenDepartAndUser = [this.usersByDepart[0].value,this.usersByDepart[1].value]
            break
          case 'depart':
            this.choosenDepartAndUser = [this.usersByDepart[0].value,'entire_' + this.usersByDepart[0].value]
            break
          default:
            this.choosenDepartAndUser = ['allDepart','allPerson']
        }
        getPersonalLimit().then((res)=>{
          if(res.status == 'success'){
            this.remainLimit = res.data.remainLimit
            this.normalLimit = res.data.normalLimit
            this.temporaryLimit = res.data.temporaryLimit
            this.interval = res.data.interval
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getPersonalLimit error info:', res.msg)
          }
        }).catch((err)=>{console.log('getPersonalLimit catch info:',err)})
        this.refreshPage()
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      })
    }
  }
</script>

<style lang="scss">
  .subscribePerformance{
    .limit{
      .weui-cells{margin-top: 0;}
      .red{color:red;}
    }
    .card-padding{
      .desc{}
      .secDesc{}
    }
    .filterArea{
      .filterItem{margin-bottom: 0.5rem;}
    }
    .gridDisplay{
      h2.title{
        line-height: 1.8rem;color: #636363;font-size:2rem;text-align: center;margin: 1rem 0;
        small{font-size:1rem;color: #999999;}
      }
      .data{display: inline-block;height:1.5rem;}
    }
  }
</style>
